<template>
  <el-card>
    <el-row :gutter="8">
      <!-- <el-col :span="6">
        <x-tree :treeData="menuData" />
      </el-col>-->
      <el-col :span="4">
        <x-tree ref="xTree" :treeData="treeData" @changeTree="handleChangeTree" />
      </el-col>
      <el-col :span="20">
        <div class="ofh mb10" style="line-height: 32px">
          <span>
            当前上级菜单：
            <span>{{selectObj.parentId || selectObj.showId ? selectObj.parentName : null }}</span>
          </span>
          <el-tooltip class="item" content="新增菜单" effect="dark" placement="top">
            <el-button
              class="fr"
              size="small"
              icon="el-icon-plus"
              type="primary"
              @click="handleAdd(false)"
            />
          </el-tooltip>
          <el-tooltip class="item" content="快速新增流程菜单" effect="dark" placement="top">
            <el-button class="fr mr20" size="small" icon="el-icon-plus" @click="handleAdd(true)" />
          </el-tooltip>
        </div>
        <menu-table @setTree="handleSetTree" ref="menuTable" @edit="handleEdit" />
      </el-col>
    </el-row>
    <menu-modal ref="menuModal" @refresh="handleRefresh" />
  </el-card>
</template>

<script>
import MenuTable from './MenuTable'
import MenuModal from './menuModal'
import XTree from '@/components/XTree'
import { getMenuTree, getMenuAll } from '@/api/menu'
import { asyncRouterMap } from '@/config/router.config.js'

export default {
  name: 'TreeList',
  components: {
    XTree,
    MenuModal,
    MenuTable
  },
  data() {
    return {
      treeData: [],
      // menuData: [],
      selectObj: {}
    }
  },
  created() {
    this.getMenuTree()
    // console.log('asyncRouterMap', asyncRouterMap[0].children)

    // this.menuData = [...asyncRouterMap[0].children]
    // this.menuData = this.handleData(this.menuData)
    // console.log('menuData', this.menuData)
  },
  methods: {
    handleSetTree(row) {
      this.$refs.xTree.getKeys([row.parentId])
      this.handleChangeTree(row)
    },
    handleData(arr) {
      arr.map(v => {
        v.title = v.meta.title + ' ' + v.path
        if (v.children && v.children.length > 0) {
          this.handleData(v.children)
        }
      })
      return arr
    },
    getMenuTree() {
      getMenuTree().then(res => {
        let arr = [
          {
            title: '顶级菜单',
            key: '',
            value: '',
            children: res.data
          }
        ]
        this.treeData = arr
      })
    },
    async handleRefresh() {
      this.$refs.menuTable.handleGetList()
      this.getMenuTree()
      const res = await getMenuAll()
      let arr = []
      if (res.state === '000000') {
        asyncRouterMap[0].children = [...res.data]
        this.$store.commit('SET_ROUTERS', asyncRouterMap)
      }
    },
    handleChangeTree(obj) {
      this.selectObj = obj
      this.$refs.menuTable.getId(obj)
    },
    handleAdd(quick = false) {
      if (this.selectObj.parentId !== '') {
        this.$refs.menuModal.edit(false, this.selectObj, quick)
      } else {
        this.$refs.menuModal.edit(false, {}, quick)
      }
    },
    handleEdit(record) {
      if (this.selectObj.parentId !== '') {
        this.$refs.menuModal.edit(true, { ...record, ...this.selectObj })
      } else {
        this.$refs.menuModal.edit(true, record)
      }
    }
  }
}
</script>
